<!-- index.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的第一个网页</title>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
        }
        
        h1 {
            color: #333;
            font-size: 28px;
            text-align: center;
            margin-bottom: 30px;
        }
        
        p {
            line-height: 1.6;
            letter-spacing: 0.5px;
            color: #555;
            margin-bottom: 20px;
        }
        
        img {
            border: 3px solid #ddd;
            border-radius: 5px;
            display: block;
            margin: 0 auto 30px;
            max-width: 100%;
            height: auto;
        }
        
        a {
            color: #007BFF;
            text-decoration: none;
            font-weight: bold;
        }
        
        a:hover {
            color: #0056b3;
            text-decoration: underline;
            background-color: #f0f7ff;
            padding: 2px 4px;
            border-radius: 2px;
        }
    </style>
</head>
<body>
    <h1>我的第一个网页</h1>
    
    <p>
        大家好，我是一名学习Web开发的学生。通过本次实验，我希望掌握HTML文档的基本结构和常用标签的使用方法。
    </p>
    
    <p>
        本次实验的目的是熟悉HTML的基本语法，能够使用HTML标签创建一个简单的静态网页，包括标题、段落、图片和超链接等元素。
    </p>
    
    <img src="https://picsum.photos/800/400" alt="示例图片">
    
    <p>
        <a href="https://www.example.com" target="_blank">访问示例网站</a>
    </p>
</body>
</html>